<template>
  <div class="btn-audio" @click="audioPlayPause">
    <!-- 
    mp3在线测试地址
    http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3
    http://downsc.chinaz.net/files/download/sound1/201206/1638.mp3
    http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3
     -->
    <audio :src="src" ref="audio">not support audio</audio>
    <Icon v-if="paused == true" type="ios-play" class="icon-audio" />
    <Icon v-if="paused == false" type="ios-pause" class="icon-audio" />
  </div>
</template>
<script>
export default {
  name: 'MediaAudio',
  components: {
  },
  props: {
    src: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      paused: true
    }
  },
  computed: {
  },
  methods: {
    audioPlayPause () {
      let audio = this.$refs.audio
      if (audio.paused) {
        audio.play()
      } else {
        audio.pause()
      }
      this.paused = audio.paused
    }
  }
}
</script>

<style lang="less" scoped>
  .btn-audio{
    height: 50px;
    position: relative;
    .icon-audio {
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      width: 20px;
      height: 20px;
      margin: auto;
      font-size: 20px;
    }
  }
</style>
